<!-- 参政议政 -->
<template>
  <Pannel ref="oPannel" @load="handleLoadData" @refresh="handleLoadData">
    <view class="pannel-inner-box">
      <NavBar></NavBar>
      <image class="bg-image" :src="bg" mode="widthFix" />
  <PickerYear class="picker-year" :initYear="curYear" @change="handleYearChange"></PickerYear>

      <view class="area-1">
        <ListScore :lists="data1.scores"></ListScore>
      </view>
    </view>
  </Pannel>
</template>

<script lang="ts" setup>
import bg from "./static/base64/score_bg";

import ListScore from "./components/ListScore.vue";

import useDetail from "@/store/detail";
import { useYear } from '@/store/index';
import { requestPost } from "@/hooks/api";

const [ year ] = useYear();

const [ detail, setDetail ] = useDetail();

const curYear = ref(detail.value) as any;

const oPannel = ref(null) as any;
watch(curYear, () => {
  oPannel.value?.dataLoad( fetchDatas );
});

const handleYearChange = (year: any) => {
  curYear.value = year;
}

//  年度得分详情
const [data1, fetchData1] = requestPost("/ascreen/home/partyMemberHomeScoreList/ajax");

const onJump = (data: any) => {
  uni.navigateTo(data);
};

const handleLoadData: any = (callback: any): any => {
  callback(fetchDatas);
};

async function fetchDatas() {
  await fetchData1({ year: curYear.value })
}
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .bg-image {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .picker-year {
    position: absolute;
    top: 236rpx;
    left: 430rpx;
  }

  .area-1 {
    margin-top: 360rpx;
    width: 686rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }
}
</style>
